<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<hr>
			<h1>人名：{{person.name}}</h1>
			<h1>年龄：{{person.age}}</h1>
			<hr>
			<h1>人名（大写）：{{person.name.toUpperCase()}}</h1>
			<h1>年龄（大1岁）：{{person.age + 1}}</h1>
			<h1>{{ person.age > 18 ? '成年' : '未成年' }}</h1>
			<h1>{{100}}</h1>
			<h1>{{100 + 1}}</h1>
			<h1>{{'100' + 1}}</h1>
		</div>


		<script type="text/javascript" >
			Vue.config.productionTip = false;
			new Vue({
				el:'#demo',
				data:{ 
					name:'尚硅谷',
					address:'宏福科技园',
					person:{
						name:'tom',
						age:13
					}
				}
			})
		</script>
	</body>
</html>